<template>
	<div class="teacher-cont">
		<cmp-crumb :list="crumb"></cmp-crumb>
		<div class="teacher-content" v-if="teacherList.length != 0">
			<div class="teacher-item" @click="goDetails(item)" v-for="item in teacherList">
				<div class="teacher-avanar">
					<el-image style="width: 100%; height: 100%" :src="item.avatar" fit="cover">
						<div slot="error" class="image-slot">
							<img src="../assets/img/no_img2.png" alt="" />
						</div>
					</el-image>
				</div>
				<div class="teacher-name">{{item.teacherName}}</div>
				<div class="teacher-job">{{item.teacherTitle}}</div>
				<div class="teacher-intro" v-html="item.content"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import cmpCrumb from '@/components/cmp-crumb'
	import {
		getGoodteacherApi
	} from '@/api/Lesson'
	export default {
		data() {
			return {
				crumb: [{
					title: '主页',
					url: '/'
				}, {
					title: '名师展播列表',
					url: '/Teacher'
				}],
				token: this.$store.state.app.token || this.$cookies.get('sy_token'),
				teacherList: [1]
			}
		},
		created() {
			this.getTeacher()
		},
		methods: {
			getTeacher() {
				getGoodteacherApi().then(res => {
					this.teacherList = res.data
				})
			},
			goDetails(obj) {
				this.$router.push('/TeacherIntro?id=' + obj.teacherId)
			}
		},
		components: {
			cmpCrumb
		}
	}
</script>

<style lang="less">
	@contWidth: 1280px;

	.teacher-cont {
		min-height: calc(100vh - 120px);

		.teacher-content {
			width: @contWidth;
			margin: 0 auto;
			padding: 96px 20px 20px;
			display: flex;
			flex-wrap: wrap;
		}

		.teacher-item {
			position: relative;
			width: 216px;
			height: 251px;
			margin: 10px 10px 50px;
			background: #FFFFFF;
			border-radius: 5px;
			padding-top: 64px;
			cursor: pointer;
			// margin-bottom: 40px;
			box-shadow: 0 0 10px 2px #ccc;
		}

		.teacher-avanar {
			width: 84px;
			height: 84px;
			border-radius: 84px;
			overflow: hidden;
			position: absolute;
			top: -42px;
			left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			border: 2px solid #fff;
			box-shadow: 0px 6px 10px 0px rgba(117, 53, 255, 0.2);
		}

		.teacher-name {
			font-size: 14px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #000000;
			line-height: 24px;
			text-align: center;
		}

		.teacher-job {
			font-size: 12px;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			color: #858585;
			line-height: 20px;
			text-align: center;
			margin-bottom: 34px;

		}

		.teacher-intro {
			p {
				padding: 0 10px;
				font-size: 12px;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 400;
				color: #858585;
				line-height: 17px;
				width: 100%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				white-space: normal;
				word-break: break-all;
			}

		}
	}
</style>